<template>
  <div class="project">
    <h3 class="title">新增试验项目</h3>
    <div class="container">
      <el-form
        ref="formRef"
        :model="formModel"
        class="my_form"
        :label-width="'auto'"
      >
        {{ form }}
        <el-form-item label="试验名称" prop="name">
          <el-input v-model="formModel.name"></el-input>
        </el-form-item>

        <el-form-item label="炉型" prop="name1">
          <el-radio-group v-model="formModel.burner">
            <el-radio
              v-for="(item, key) in dataList.furnaceSize"
              :key="key"
              :value="key"
              >{{ item }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="示踪燃烧器位置">
          <el-row :gutter="20">
            <template
              v-for="(item, key) in formModel.combustion_type"
              :key="item"
            >
              <el-col :span="10" class="el_col_my">
                <el-input v-model="formModel.combustion_type[key]"></el-input>
              </el-col>
              <el-col
                :span="2"
                v-if="key == formModel.combustion_type.length - 1"
              >
                <el-button circle class="my_btn" @click="clickCombustion(item)"
                  >+</el-button
                >
              </el-col>
              <el-col :span="2" v-else>
                <el-button
                  circle
                  class="my_btn del"
                  @click="clickCombustionDel(key)"
                  >-</el-button
                >
              </el-col>
            </template>
          </el-row>
        </el-form-item>
        <el-form-item label="炉膛尺寸" prop="name3">
          <el-row :gutter="20">
            <el-col :span="2" class="el_col_my">长:</el-col>
            <el-col :span="14" class="el_col_my">
              <el-input-number v-model="formModel.long" :controls="false" />
            </el-col>
            <el-col :span="8" class="el_col_my">mm</el-col>
            <el-col :span="2" class="el_col_my">宽:</el-col>
            <el-col :span="14" class="el_col_my">
              <el-input-number v-model="formModel.wide" :controls="false" />
            </el-col>
            <el-col :span="8" class="el_col_my">mm</el-col>
          </el-row>
        </el-form-item>
        <div style="display: flex; justify-content: center">
          <el-button class="tj" @click="submit">提交</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script setup name="homeView">
import * as echarts from "echarts";
import { toRefs, onMounted, ref, reactive, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { createRecord } from "../http/records";
import { ElMessage } from "element-plus";
import dataListStore from "../stores/dataList";
const { proxy } = getCurrentInstance();
const dataList = dataListStore();
const router = useRouter();
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
const data = reactive({
  formModel: {
    name: "",
    burner: "0",
    combustion_mode: undefined,
    combustion_type: ["A层", "B层", "C层"],
    long: undefined,
    wide: undefined,
  },
  rules: {
    name: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
    name1: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
    name3: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
  },
});
const { formModel, rules } = toRefs(data);
const _clickCombustion = () => {
  const nextIndex = formModel.value.combustion_type.length;
  if (nextIndex < letters.length) {
    const nextLetter = letters[nextIndex];
    formModel.value.combustion_type.push(`${nextLetter}层`);
    // updateOutput();
  } else {
    alert("无法再添加更多层（超过字母范围）！");
  }
};
const clickCombustion = (name) => {
  let index = letters.indexOf(name.substring(0, 1));

  if (letters[index + 1]) {
    formModel.value.combustion_type.push(`${letters[index + 1]}层`);
  } else {
    alert("无法再添加更多层（超过字母范围）！");
  }
};

const clickCombustionDel = (index) => {
  formModel.value.combustion_type.splice(index, 1);
};

function submit() {
  formModel.value.combustion_mode = JSON.stringify(
    formModel.value.combustion_type
  );
  // delete formModel.value.combustion_type;
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      createRecord(formModel.value).then((res) => {
        ElMessage({
          message: "添加成功",
          type: "success",
          duration: 2 * 1000,
        });
        //  proxy.getInfo = formModel.value;
        dataList.getInfo = formModel.value;
        dataList.getInfo.id = res.record.id;
        router.push("/project");
      });
    }
  });

  // router.push("/history");
}

onMounted(() => {});
</script>
<style lang="scss" scoped>
.tj {
  padding: 1rem 2rem;
  background: #4f52bb;
  color: #fff;
}
.project {
  height: 100%;
  background-color: #fff;
  box-shadow: 0px 0px 0.625rem 0px rgba(121, 135, 253, 0.05); /* 10px/16 */
  border-radius: 1rem; /* 16px/16 */

  .title {
    font-size: 1.25rem; /* 20px/16 */
    color: #0f1a58;
    padding: 2rem 0 0 3.75rem; /* 32px/16 0 0 60px/16 */
    font-weight: bold;
  }

  .container {
    height: calc(100% - 15rem); /* 240px/16 */
    display: flex;
    align-items: center;
    justify-content: center;

    .my_form {
      width: 50rem; /* 800px/16 */

      :deep() {
        .el-form-item__label {
          font-family: PingFang SC, sans-serif;
          font-weight: 500;
          font-size: 0.875rem; /* 14px/16 */
          color: #0f1a58;
          text-align: right;
          font-style: normal;
          text-transform: none;
          height: 1.375rem; /* 22px/16 */
          margin-right: 0.9375rem; /* 15px/16 */
        }

        .el-form-item__content {
          margin-bottom: 1.875rem; /* 30px/16 */
        }
      }
    }

    .el_col_my {
      margin-bottom: 0.9375rem; /* 15px/16 */
      color: #0f1a58;
    }

    .my_btn {
      width: 1.375rem; /* 22px/16 */
      height: 1.375rem; /* 22px/16 */
      background: #4f52bb;
      color: #fff;
      &.del {
        background-color: #eb5858;
        border-color: #eb5858;
      }
    }
  }
}

/* 1K (1920x1080) 基础样式已覆盖 */

/* 2K (2560x1440) */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
  .project {
    .title {
      font-size: 1.5rem; /* 24px/16 */
      padding: 2.5rem 0 0 4.5rem; /* 40px/16 0 0 72px/16 */
    }

    .container {
      height: calc(100% - 17.5rem); /* 280px/16 */

      .my_form {
        width: 55rem; /* 880px/16 */

        :deep() {
          .el-form-item__label {
            font-size: 1rem; /* 16px/16 */
            height: 1.5rem; /* 24px/16 */
          }

          .el-form-item__content {
            margin-bottom: 2rem; /* 32px/16 */
          }
        }
      }

      .my_btn {
        width: 1.5rem; /* 24px/16 */
        height: 1.5rem; /* 24px/16 */
      }
    }
  }
}

/* 2.4K (2560x1600) */
@media screen and (min-width: 2561px) and (max-width: 2880px) {
  .project {
    border-radius: 1.25rem; /* 20px/16 */

    .title {
      font-size: 1.75rem; /* 28px/16 */
      padding: 3rem 0 0 5rem; /* 48px/16 0 0 80px/16 */
    }

    .container {
      height: calc(100% - 20rem); /* 320px/16 */

      .my_form {
        width: 60rem; /* 960px/16 */

        :deep() {
          .el-form-item__label {
            font-size: 1.125rem; /* 18px/16 */
            height: 1.75rem; /* 28px/16 */
            margin-right: 1.25rem; /* 20px/16 */
          }

          .el-form-item__content {
            margin-bottom: 2.25rem; /* 36px/16 */
          }
        }
      }

      .my_btn {
        width: 1.75rem; /* 28px/16 */
        height: 1.75rem; /* 28px/16 */
      }
    }
  }
}

/* 4K (3840x2160) */
@media screen and (min-width: 2881px) {
  .project {
    border-radius: 1.5rem; /* 24px/16 */
    box-shadow: 0px 0px 1rem 0px rgba(121, 135, 253, 0.05); /* 16px/16 */

    .title {
      font-size: 2rem; /* 32px/16 */
      padding: 3.5rem 0 0 6rem; /* 56px/16 0 0 96px/16 */
    }

    .container {
      height: calc(100% - 25rem); /* 400px/16 */

      .my_form {
        width: 70rem; /* 1120px/16 */

        :deep() {
          .el-form-item__label {
            font-size: 1.25rem; /* 20px/16 */
            height: 2rem; /* 32px/16 */
            margin-right: 1.5rem; /* 24px/16 */
          }

          .el-form-item__content {
            margin-bottom: 2.5rem; /* 40px/16 */
          }
        }
      }

      .el_col_my {
        margin-bottom: 1.25rem; /* 20px/16 */
      }

      .my_btn {
        width: 2rem; /* 32px/16 */
        height: 2rem; /* 32px/16 */
      }
    }
  }
}
</style>
